<template>
  <div>
    <div class="el-main">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>全部商品</el-breadcrumb-item>
          <el-breadcrumb-item v-show="!search">分类</el-breadcrumb-item>
          <el-breadcrumb-item v-show="search">搜索</el-breadcrumb-item>
          <el-breadcrumb-item v-show="search">{{search}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <nav>
        <div class="fl-right">
          <div class="title">分类</div>
          <el-tabs type="card" v-model="activeName">
            <el-tab-pane
              :label="item.category_name"
              v-for="item in getCategoryList"
              :key="item.category_id"
              :name="'' + item.category_id"
            ></el-tab-pane>
          </el-tabs>
          <!-- 内容区域 -->
          <div class="phone">
            <div class="box-bd">
              <div class="list">
                <ul>
                  <MyList :listData="getProductByCategoryList" :isMore="true"></MyList>
                </ul>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total"
              :current-page="currentPage"
              @current-change="currentChange"
            ></el-pagination>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
import API from "../../API/Api";
export default {
  name: "",
  data() {
    return {
      search: "",
      activeName: "0",
      getCategoryList: [],
      getAllProductsList: [],
      categoryID: [],
      currentPage: 1,
      pageSize: 15,
      total: 0,
      getProductByCategoryList: []
    };
  },
  mounted() {
    this.getAllProduct();
    this.getCategorys();
    // console.log(this.queryInfo.currentPage);
    // API.aaaaa().then(res => {
    //   console.log(res);
    // });
  },
  watch: {
    activeName(val) {
      let categoryID = Number(val);
      this.categoryID = [categoryID];
      this.currentPage = 1;
      this.total = 0;
      this.search = "";
      console.log(categoryID);
      //根据分类ID确定是获取所有商品还是单独某一类的商品
      if (categoryID === 0) {
        //获取全部商品
        this.categoryID = [];
        this.getAllProduct();
      } else {
        this.getProductByCategory();
      }
    },
    // 监听分页
    currentPage(currentPage) {
      if (!this.categoryID.length) {
        this.getAllProduct();
        return;
      }
      this.getProductByCategory();
    },
    $route(value) {
      if (value.query.productID) {
        this.categoryID = value.query.productID;
        this.getProductByCategory();
        return;
      }
      if (value.query.search) {
        this.search = value.query.search;
        this.getProductBySearch();
      }
    }
  },
  // activated() {
  //   this.activeName = "-1";
  // },
  methods: {
    // 所有商品
    getAllProduct() {
      var queryInfo = {
        categoryID: this.categoryID,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      };
      API.getAllProducts(queryInfo).then(res => {
        // console.log(res);
        this.total = res.total;
        this.getProductByCategoryList = res.Product;
      });
    },
    // 分类商品信息
    getCategorys() {
      API.getCategory().then(res => {
        // console.log(res);
        this.getCategoryList = res.category;
        this.getCategoryList.unshift({
          category_id: 0,
          category_name: "全部"
        });
      });
    },
    // 分类商品
    getProductByCategory() {
      var queryInfos = {
        categoryID: this.categoryID,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      };
      API.getProductByCategory(queryInfos).then(res => {
        // console.log(res);
        this.total = res.total;
        this.getProductByCategoryList = res.Product;
        // console.log(this.getProductByCategoryList);
      });
    },

    currentChange(currentPage) {
      this.currentPage = currentPage;
    },
    getProductBySearch() {
      let send = {
        search: this.search,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      };
      API.getProductBySearch(send).then(res => {
        console.log(res);
        this.getProductByCategoryList = res.Product;
        this.total = res.total;
      });
    }
  },
  computed: {},
  components: {},

  getters: {}
};
</script>

<style scoped>
* {
  margin: 0 auto;
}
* ul {
  list-style: none;
}
.el-main {
  height: 1098px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}
.el-pagination {
  height: 44px;
  float: left;
}
.breadcrumb {
  height: 50px;
  background-color: #fff;
}
.el-breadcrumb {
  width: 1225px;
  line-height: 30px;
  background: #fff;
  font-size: 16px;
  margin: 0 auto;
}
nav {
  widows: 100%;
  height: 40px;
  background: #fff;
}
.title {
  width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
  line-height: 42px;
}
.fl-right {
  width: 1225px;
  height: 42px;
  margin-bottom: 15px;
}
.card {
  float: left;
}
.carouselImg {
  width: 100%;
  height: 100%;
}
.banxin {
  width: 1225.5px;
  margin: 0 auto;
}
/* nav {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #b0b0b0;
} */
.routers {
  margin-right: 280px;
}
.contentBox {
  margin-top: 20px;
  background-color: #f5f5f5;
  padding-bottom: 20px;
  height: 2059px;
}
.box {
  height: 2059px;
}
.phone {
  width: 1245.5px;
  height: 924px;
}
.box-hd {
  width: 100%;
  height: 58px;
}
.box-hd p {
  float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.box-bd {
  width: 100%;
  height: 615px;
}
.box-bd .promo-list {
  float: left;
  height: 615px;
  width: 234px;
}
.box-bd .promo-list img {
  width: 100%;
  height: 100%;
}
.box-bd .list {
  float: left;
  width: 100%;
  /* height: 924px; */
  /* background: rgb(224, 34, 34); */
}
/* .list ul {
  display: flex; 
  flex-wrap: wrap;
  justify-content: space-between;
} */
.list ul li:nth-child(1) {
  margin-left: -13.7px;
}
.list ul li:nth-child(6) {
  margin-left: -13.7px;
}
.list ul li:nth-child(11) {
  margin-left: -13.7px;
}
.list ul li {
  float: left;
  width: 234px;
  height: 280px;
  padding: 10px 0;
  margin: 0 0 13.7px 13.7px;

  background-color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  position: relative;
  cursor: pointer;
}
.list ul li:hover {
  transform: translateY(-4px);
  box-shadow: 0px 13px 13px rgb(218, 213, 213);
}
.list ul li img {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: 160px;
}
.list ul li h2 {
  margin-top: 25px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list ul li h3 {
  margin: 5px 10px;
  font-weight: 500;
  height: 18px;
  font-size: 12px;
  text-align: center;
  color: #b0b0b0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list ul li p {
  margin: 10px 10px 10px;
  text-align: center;
  color: #ff6700;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.span-del {
  margin-left: 0.5em;
  color: #b0b0b0;
  text-decoration: line-through;
}
.appliances {
  width: 100%;
  height: 673px;
  margin-top: 20px;
}
.promo-list li {
  float: left;
  width: 224px;
  height: 300px;
  margin: 0 0 14.5px 13.7px;
  background-color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  position: relative;
  cursor: pointer;
}
.promo-list li:hover {
  transform: translateY(-4px);
  border-radius: 2px 2px 2px #000;
  text-decoration: none;
  box-shadow: 0px 13px 13px rgb(218, 213, 213);
}
.promo-list li img {
  width: 100%;
  height: 100%;
}
.lis {
  text-align: center;
  line-height: 280px;
  cursor: pointer;

  font-size: 18px;
}
.lis a {
  color: #000;
  text-decoration: none;
}
.lis a:hover {
  color: orange;
}
.box-hds {
  width: 100%;
  height: 58px;
}
.box-hds p {
  display: flex;
  justify-content: space-between;
}
.box-hds p span {
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.box-hds p ul {
  font-weight: 200;
  line-height: 58px;
  display: flex;
}
.box-hds p ul li {
  margin-left: 30px;
  height: 40px;
}
.box-hds p ul li.active,
.box-hds p ul li:hover {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
</style>